<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath%>">
    <title>苏半夏的个人博客</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="site.webmanifest">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/logo/blog_icon.png">
    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/progressbar_barfiller.css">
    <link rel="stylesheet" href="assets/css/gijgo.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/animated-headline.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/pagination.css">

</head>

<body>
<!-- ? Preloader Start -->
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img src="assets/img/logo/loder.png" alt="">
            </div>
        </div>
    </div>
</div>
<!-- Preloader Start -->
<header>
    <!-- Header Start -->
    <div class="header-area">
        <div class="main-header ">
            <div class="header-bottom  header-sticky">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <!-- Logo -->
                        <div class="col-xl-2 col-lg-2">
                            <div class="logo">
                            </div>
                        </div>
                        <div class="col-xl-10 col-lg-10">
                            <div class="menu-wrapper  d-flex align-items-center justify-content-end">
                                <!-- Main-menu -->
                                <div class="main-menu d-none d-lg-block">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="javascript:(0);">首页</a></li>
                                            <li><a href="index/toSelfPage.do">个人主页</a></li>
                                            <li><a href="index/toErrorPage.do">友情链接</a></li>
                                            <li><a href="index/toThankPage.do">鸣谢</a></li>
                                        </ul>
                                    </nav>
                                </div>
                                <!-- Header-btn -->
                                <div class="header-right-btn d-none d-lg-block ml-20">
                                    <a href="mailto:3228314370@qq.com" class="btn header-btn">联系我</a>
                                </div>
                            </div>
                        </div>
                        <!-- Mobile Menu -->
                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
</header>
<main>

    <!-- slider Area Start-->
    <div class="slider-area position-relative">
        <div class="slider-active dot-style">
            <!-- Single Slider -->
            <div class="single-slider hero-overly slider-height slider-bg1 d-flex align-items-center">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-10">
                            <div class="hero__caption">
                                <h1 data-animation="fadeInUp" data-delay=".2s">苏半夏</h1>
                                <P data-animation="fadeInUp" data-delay=".4s">人的才能像挂钟一样，如果停止了摆动，<br>就要落后了。</P>
                                <!-- Hero-btn -->
                                <div class="hero__btn">
                                    <a href="index/toSelfPage.do" class="hero-btn mb-10" data-animation="fadeInUp"
                                       data-delay=".8s">个人主页</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Single Slider -->
            <div class="single-slider hero-overly slider-height slider-bg1 d-flex align-items-center">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-10">
                            <div class="hero__caption">
                                <h1 data-animation="fadeInUp" data-delay=".2s">苏半夏</h1>
                                <P data-animation="fadeInUp" data-delay=".4s">相信就是强大，怀疑只会抑制能力，<br>而信仰就是力量。</P>
                                <!-- Hero-btn -->
                                <div class="hero__btn">
                                    <a href="index/toSelfPage.do" class="hero-btn mb-10" data-animation="fadeInUp"
                                       data-delay=".8s">个人主页</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Single Slider -->
            <div class="single-slider hero-overly slider-height slider-bg1 d-flex align-items-center">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-10">
                            <div class="hero__caption">
                                <h1 data-animation="fadeInUp" data-delay=".2s">苏半夏</h1>
                                <P data-animation="fadeInUp" data-delay=".4s">当你还不能对自己说今天学到了什么东西时，<br>你就不要去睡觉。</P>
                                <!-- Hero-btn -->
                                <div class="hero__btn">
                                    <a href="index/toSelfPage.do" class="hero-btn mb-10" data-animation="fadeInUp"
                                       data-delay=".8s">个人主页</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--? video_start -->
        <!-- video_end -->

    </div>
    <!-- slider Area End-->
    <!--? Visit Our Tailor Start -->
    <!--? Blog Area Start-->
    <section class="blog_area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mb-5 mb-lg-0">
                    <div class="blog_left_sidebar">
<%--                        <article class="blog_item">--%>
<%--                            <div class="blog_item_img">--%>
<%--                                <img class="card-img rounded-0" src="assets/img/blog/single_blog_1.png" alt="">--%>
<%--                                <a href="#" class="blog_item_date">--%>
<%--                                    <h3>15</h3>--%>
<%--                                    <p>Jan</p>--%>
<%--                                </a>--%>
<%--                            </div>--%>

                    </div>
                    <div class="m-style M-box11"></div>
                </div>
                <div class="col-lg-4">
                    <div class="blog_right_sidebar">
                        <aside class="single_sidebar_widget popular_post_widget">
                            <h4 class="widget_title" style="color: #2d2d2d;">博客Owner</h4>
                            <div class="media post_item">
                                <img src="assets/img/post/post_1.jpg" alt="post">
                                <div class="media-body">
                                    <h3 style="color: #2d2d2d;">Hachi of Pinellia Ternata</h3>
                                    <a style="color: #2d2d2d;" href="https://github.com/dmsbx"><i
                                            class="fab fa-github"></i></a>&nbsp;&nbsp;
                                    <a style="color: #2d2d2d;" href="mailto:3228314370@qq.com"><i
                                            class="fas fa-envelope"></i></a>&nbsp;&nbsp;

                                </div>
                            </div>

                        </aside>

                        <aside class="single_sidebar_widget post_category_widget">
                            <h4 class="widget_title" style="color: #2d2d2d;">分类</h4>
                            <ul class="list cat-list" id="categoryList">
<%--                                <li>--%>
<%--                                    <a href="#" class="d-flex">--%>
<%--                                        <p>Resaurant food</p>--%>
<%--                                        <p>(37)</p>--%>
<%--                                    </a>--%>
<%--                                </li>--%>
                            </ul>
                        </aside>
                        <aside class="single_sidebar_widget popular_post_widget" id="recentArticleList">
                            <h3  class="widget_title" style="color: #2d2d2d;">近期文章</h3>
<%--                            <div class="media post_item">--%>
<%--                                <img src="assets/img/post/post_1.png" alt="post">--%>
<%--                                <div class="media-body">--%>
<%--                                    <a href="blogDetails.jsp">--%>
<%--                                        <h3 style="color: #2d2d2d;">From life was you fish...</h3>--%>
<%--                                    </a>--%>
<%--                                    <p>January 12, 2019</p>--%>
<%--                                </div>--%>
<%--                            </div>--%>
                        </aside>
                        <aside class="single_sidebar_widget tag_cloud_widget">
                            <h4 class="widget_title" style="color: #2d2d2d;">标签</h4>
                            <ul class="list" id="tagList">
<%--                                <li>--%>
<%--                                    <a href="#">project</a>--%>
<%--                                </li>--%>
                            </ul>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Blog Area End -->
</main>

<footer>
    <div class="footer-wrapper">
        <!-- footer-bottom area -->
        <div class="footer-bottom-area">
            <div class="container">
                <div class="footer-border">
                    <div class="row d-flex align-items-center">
                        <div class="col-xl-12 ">
                            <div class="footer-copy-right text-center">
                                <p>With the earth and the sky and the water,
                                    remade, like a casket of gold
                                    For my dreams of your image that blossoms
                                    a rose in the deeps of my heart.</p>
                                <p>For My NingNing</p>
                                <p>
                                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                    Not only for record learning, but also for recording our love <i class="fa fa-heart"
                                                                                                     aria-hidden="true"></i>
                                    From 20200709
                                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End-->
    </div>
</footer>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->

<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="assets/js/jquery.slicknav.min.js"></script>
<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/animated.headline.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>

<!-- Date Picker -->
<script src="assets/js/gijgo.min.js"></script>
<!-- Nice-select, sticky -->
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/jquery.sticky.js"></script>
<!-- Progress -->
<script src="assets/js/jquery.barfiller.js"></script>

<!-- counter , waypoint,Hover Direction -->
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/jquery.countdown.min.js"></script>
<script src="assets/js/hover-direction-snake.min.js"></script>

<!-- contact js -->
<script src="assets/js/contact.js"></script>
<script src="assets/js/jquery.form.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/mail-script.js"></script>
<script src="assets/js/jquery.ajaxchimp.min.js"></script>

<!-- Jquery Plugins, main Jquery -->
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/jquery.pagination.js"></script>
<script type="text/javascript">
    $(function () {
        var pageTotals = 1
        var categoryId
        var tagId
        //定义函数展现博客列表
        function queryBlogListPage(pageNo,categoryId,tagId) {
            $.ajax({
                async:false,
                url: "index/queryArticleListByPageNo.do",
                data: {
                    pageNo: pageNo,
                    categoryId:categoryId,
                    tagId:tagId
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    var htmlStr = ""
                    //循环遍历所得到的文章数组
                    $.each(data.articleList, function (index, obj) {
                        var m = (obj.createDate).substr(5,2)
                        var mouth = ""
                        switch (m) {
                            case "01" :
                                mouth = "Jan" ;
                                break;
                            case "02" :
                                mouth = "Feb" ;
                                break;
                            case "03" :
                                mouth = "Mar" ;
                                break;
                            case "04" :
                                mouth = "Apr" ;
                                break;
                            case "05" :
                                mouth = "May" ;
                                break;
                            case "06" :
                                mouth = "Jun" ;
                                break;
                            case "07" :
                                mouth = "Jul" ;
                                break;
                            case "08" :
                                mouth = "Aug" ;
                                break;
                            case "09" :
                                mouth = "Sept" ;
                                break;
                            case "10" :
                                mouth = "Oct" ;
                                break;
                            case "11" :
                                mouth = "Nov" ;
                                break;
                            case "12" :
                                mouth = "Dec" ;
                                break;
                        }
                        var day = (obj.createDate).substr(8,2)
                        htmlStr += "<article class=\"blog_item\" >"
                        htmlStr += "<div class=\"blog_item_img\">"
                        htmlStr += "<img class=\"card-img rounded-0\" src=\"assets/img/blog/"+obj.pictureId+"\" alt=\"\">"
                        htmlStr += "<a href=\"javascript:void(0);\" class=\"blog_item_date\">"
                        htmlStr += "<h3>"+day+"</h3>"
                        htmlStr += "<p>"+mouth+"</p>"
                        htmlStr += "</a>"
                        htmlStr += "</div>"
                        htmlStr += "<div class=\"blog_details\">"
                        htmlStr += "<a class=\"d-inline-block\" articleId = '"+obj.id+"' href='javascript:(0);'>"
                        htmlStr += "<h2 class=\"blog-head\" style=\"color: #2d2d2d;\">"+obj.articleTitle+"</h2>"
                        htmlStr += "</a>"
                        htmlStr += "<p>" + obj.articleAbstract + "</p>"
                        htmlStr += "<ul class=\"blog-info-link\">"
                        htmlStr += "<li><a href=\"javascript:void(0);\"><i class=\"fa fa-user\"></i>"+ " " +obj.browseTotal + " " + "访问" +"</a></li>"
                        htmlStr += "<li><a href=\"javascript:void(0);\"><i class=\"fa fa-comments\"></i>"+ " " +obj.commentTotal + " " + "评论" +"</a></li>"
                        htmlStr += "</ul>"
                        htmlStr += "</div>"
                        htmlStr += "</article>"
                    })
                    $(".blog_left_sidebar").html(htmlStr)
                   if (tagId == null || tagId == " "){
                       if (data.total % 5 ==0){
                           pageTotals = data.total / 5
                       }else {
                           pageTotals = parseInt(data.total / 5) + 1
                       }
                   }else {
                       pageTotals = 1
                   }
                    //更改分页插件
                    $('.M-box11').pagination({
                        pageCount: pageTotals,
                        totalData: data.total,
                        showData: 5,
                        current: pageNo,
                        mode: 'fixed',
                        callback: function (api) {
                            $('.now').text(api.getCurrent());
                            queryBlogListPage(api.getCurrent(),categoryId,tagId)
                        }
                    },function (api) {
                        $('.now').text(api.getCurrent());
                    })
                }
            })
        }
        queryBlogListPage(1)

        function queryAllList(){
            $.ajax({
                url:"index/queryAllArticleList.do",
                type: "post",
                dataType: "json",
                success:function (data) {
                    var htmlStrTag = ""
                    $.each(data.articleTagList,function (index,obj) {
                        htmlStrTag += "<li>"
                        htmlStrTag += "<a href=\"javascript:(0);\" tagId='"+obj.id+"' class='justFull'>"+obj.tagname+"</a>"
                        htmlStrTag += "</li>"
                    })
                    var htmlStrCategory = ""
                    $.each(data.secondCategoryList,function (index,obj) {
                        htmlStrCategory += "<li>"
                        htmlStrCategory += "<a href='javascript:(0);' categoryId='"+obj.id+"' class=\"d-flex\">"
                        htmlStrCategory += "<p>"+obj.name+"</p>"
                        htmlStrCategory += "</a>"
                        htmlStrCategory += "</li>"
                    })
                    $("#tagList").html(htmlStrTag)
                    $("#categoryList").html(htmlStrCategory)
                }
            })
        }

        queryAllList()

        //给类型列表设置单击事件
        $("#categoryList").on("click","a[class = 'd-flex']",function () {
            categoryId = $(this).attr("categoryId")
            tagId = null
            queryBlogListPage(1,categoryId)
        })

        // function queryBlogListPageByTag(tagId) {
        //     $.ajax({
        //         async:false,
        //         url: "index/queryAllArticleListByTag.do",
        //         data: {
        //             tagId:tagId
        //         },
        //         type: "post",
        //         dataType: "json",
        //         success: function (data) {
        //             var htmlStr = ""
        //             //循环遍历所得到的文章数组
        //             $.each(data.articleList, function (index, obj) {
        //                 var m = (obj.createDate).substr(5,2)
        //                 var mouth = ""
        //                 switch (m) {
        //                     case "01" :
        //                         mouth = "Jan" ;
        //                         break;
        //                     case "02" :
        //                         mouth = "Feb" ;
        //                         break;
        //                     case "03" :
        //                         mouth = "Mar" ;
        //                         break;
        //                     case "04" :
        //                         mouth = "Apr" ;
        //                         break;
        //                     case "05" :
        //                         mouth = "May" ;
        //                         break;
        //                     case "06" :
        //                         mouth = "Jun" ;
        //                         break;
        //                     case "07" :
        //                         mouth = "Jul" ;
        //                         break;
        //                     case "08" :
        //                         mouth = "Aug" ;
        //                         break;
        //                     case "09" :
        //                         mouth = "Sept" ;
        //                         break;
        //                     case "10" :
        //                         mouth = "Oct" ;
        //                         break;
        //                     case "11" :
        //                         mouth = "Nov" ;
        //                         break;
        //                     case "12" :
        //                         mouth = "Dec" ;
        //                         break;
        //                 }
        //                 var day = (obj.createDate).substr(8,2)
        //                 htmlStr += "<article class=\"blog_item\" >"
        //                 htmlStr += "<div class=\"blog_item_img\">"
        //                 htmlStr += "<img class=\"card-img rounded-0\" src=\"assets/img/blog/"+obj.pictureId+"\" alt=\"\">"
        //                 htmlStr += "<a href=\"javascript:void(0);\" class=\"blog_item_date\">"
        //                 htmlStr += "<h3>"+day+"</h3>"
        //                 htmlStr += "<p>"+mouth+"</p>"
        //                 htmlStr += "</a>"
        //                 htmlStr += "</div>"
        //                 htmlStr += "<div class=\"blog_details\">"
        //                 htmlStr += "<a class=\"d-inline-block\" articleId = '"+obj.id+"' href=\"blogDetails.jsp\">"
        //                 htmlStr += "<h2 class=\"blog-head\" style=\"color: #2d2d2d;\">"+obj.articleTitle+"</h2>"
        //                 htmlStr += "</a>"
        //                 htmlStr += "<p>" + obj.articleAbstract + "</p>"
        //                 htmlStr += "<ul class=\"blog-info-link\">"
        //                 htmlStr += "<li><a href=\"javascript:void(0);\"><i class=\"fa fa-user\"></i>"+ " " +obj.browseTotal + " " + "访问" +"</a></li>"
        //                 htmlStr += "<li><a href=\"javascript:void(0);\"><i class=\"fa fa-comments\"></i>"+ " " +obj.commentTotal + " " + "评论" +"</a></li>"
        //                 htmlStr += "</ul>"
        //                 htmlStr += "</div>"
        //                 htmlStr += "</article>"
        //             })
        //             $(".blog_left_sidebar").html(htmlStr)
        //             if (data.total % 5 ==0){
        //                 pageTotals = data.total / 5
        //             }else {
        //                 pageTotals = parseInt(data.total / 5) + 1
        //             }
        //         }
        //     })
        // }

        $("#tagList").on("click","a",function () {
            tagId = $(this).attr("tagId")
            categoryId = null
            queryBlogListPage(1,categoryId,tagId)
        })



        function queryRecentArticleList() {
            $.ajax({
                url:"index/queryArticleRecent.do",
                type:"post",
                dataType:"json",
                success:function (data) {
                    var htmlStr = ""
                    $.each(data,function (index,obj) {
                        var m = (obj.createDate).substr(5,2)
                        var mouth = ""
                        switch (m) {
                            case "01" :
                                mouth = "January" ;
                                break;
                            case "02" :
                                mouth = "February" ;
                                break;
                            case "03" :
                                mouth = "March" ;
                                break;
                            case "04" :
                                mouth = "April" ;
                                break;
                            case "05" :
                                mouth = "May" ;
                                break;
                            case "06" :
                                mouth = "June" ;
                                break;
                            case "07" :
                                mouth = "July" ;
                                break;
                            case "08" :
                                mouth = "August" ;
                                break;
                            case "09" :
                                mouth = "September" ;
                                break;
                            case "10" :
                                mouth = "October" ;
                                break;
                            case "11" :
                                mouth = "November" ;
                                break;
                            case "12" :
                                mouth = "December" ;
                                break;
                        }
                        var day = (obj.createDate).substr(8,2)
                        var year = (obj.createDate).substr(0,4)
                        htmlStr += "<div class=\"media post_item\">"
                        htmlStr += "<img src=\"assets/img/post/"+obj.pictureId+"\" alt=\"post\">"
                        htmlStr += "<div class=\"media-body\">"
                        htmlStr += "<a href=\"javascript:(0);\" articleId='"+obj.id+"'>"
                        htmlStr += "<h3 style=\"color: #2d2d2d;\">"+obj.articleTitle+"</h3>"
                        htmlStr += "</a>"
                        htmlStr += "<p>"+ mouth+ " " + day +", " + " " + year + "</p>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                    })
                    $("#recentArticleList").append(htmlStr)
                }
            })
        }

        queryRecentArticleList()

        //给近期文章的列表添加单击事件
        $("#recentArticleList").on("click","a",function () {
            var articleId = $(this).attr("articleId")
            window.location.href = "index/toBlogDetailPage.do?id=" + articleId
        })

        //给首页文章列表添加单击事件
        $(".blog_left_sidebar").on("click","a[class='d-inline-block']",function () {
            var articleId = $(this).attr("articleId")
            window.location.href = "index/toBlogDetailPage.do?id=" + articleId
        })
    })
</script>
</body>
</html>